<template>
	<div>
		<div class="search">
			<span class="iconfont">&#xe627;</span>
			<input type="text" class="search-input" placeholder="请输入城市名(如北京)" 
			v-model="keyword"
			:class="[changeSearch]"
			>
			<button class="button" :class="[changeButton]" @click="buttonClear">取消</button>
			<span class="cancel" :class="[changeCancel]" @click="xClear">X</span>
		</div>
		<div 
			class="search-content"
			v-show="this.list.length"
			ref="contentWrapper"
		>
			<ul>
				<li class="search-first">{{this.show}}</li>
				<li class="search-item" 
				v-for="item of this.list" 
				:key="item.id"
				@click="handleItemClick(item.name)"
				>{{item.name}}</li>
			</ul>
		</div>
	</div>
</template>

<script>
import BScroll from 'better-scroll'
import {disreslove} from '../../../utils/utils.js'
export default {
  name: 'locationHeader',
  props:{
	  cities:Object
  },
  data(){
	  return{
		  show:'请输入城市名（如北京）bj,beijing',
		  list:[],
		  keyword:'',
		  changeSearch:'',
		  changeButton:'',
		  changeCancel:'',
		  flag:'1',
		  iLetter:'',
		  iWord:''
	  }
  },
  methods:{
	  handleItemClick(city){
		  this.$store.dispatch('change',city)
		  this.$router.push('/')
	  },
	  showError(content){
		  this.list = ['']
		  this.show = '对不起，找不到'+content
	  },
	  buttonClear(){
		  this.keyword = ' '    //这里是让keyword内容发生改变这样才能触发watch监听
		  this.flag = '2'
	  },
	  xClear(){
		  this.keyword = ' ' 
		  this.flag = '3'
	  },
	  addClass(){
		  this.changeSearch = "changeSearch"
		  this.changeButton = "changeButton"
		  this.changeCancel = "changeCancel"
	  },
	  removeClass(){
		  this.changeSearch = ""
		  this.changeButton = ""
		  this.changeCancel = ""
	  },
	  removeBack(){
		  this.removeClass()
		  this.list = []
		  this.show = ''
	  },
	  loopAlphabet(lowerContent){
		  for(let i in this.cities){
			  if(i.toLowerCase().indexOf(lowerContent.substr(0,1))>-1){
				  let arr = []
				  this.cities[i].forEach((value)=>{
					  arr.push(value.spell.substr(lowerContent.length-1,1))    //这是提取输入内容错误位的那一位 
					  let a = [...new Set(arr)]                 //这是利用es6中Set去掉重复错误的数据
					  this.iLetter = a.toString()
				  })
			  }
		  }
	  },
	  loopWord(content){
		  for(let i in this.cities){
			  if(i.toLowerCase().indexOf(disreslove(content).substr(0,1).substr(0,1))>-1){
				  let arr = []
				  this.cities[i].forEach((value)=>{
					  arr.push(value.name.substr(content.length-1,1))    //这是提取输入内容错误位的那一位 
					  let a = [...new Set(arr)]                 //这是利用es6中Set去掉重复错误的数据
					  this.iWord = a.toString()
				  })
			  }
		  }
	  },
	  searchAlph(content){
		  			  const lowerContent = content.toLowerCase()     //输入内容字母变小写
		  			  let result = []
		  			  for(let i in this.cities)	{					//循环出的i为A,B,C,D
		  				  if(i.toLowerCase().indexOf(lowerContent.substr(0,1))>-1){
		  					  this.cities[i].forEach((value)=>{
		  						  if(value.spell.indexOf(lowerContent)>-1){
		  							  result.push(value)
		  							  this.list = result
		  						  }
		  						  else if(lowerContent.indexOf(value.spell)>-1){
		  							  this.show = '对不起，找不到'+lowerContent
		  						  }
		  						  else{
		  							  this.loopAlphabet(lowerContent)
		  							  if(!(this.iLetter.indexOf(lowerContent.substr(lowerContent.length-1,1))>-1)){
		  								  this.show = '对不起，找不到'+lowerContent
		  								  this.iLetter = ''
		  							  }
		  						  }
		  					  })}
		  				  else if(lowerContent.substr(0,1)==='u'||lowerContent.substr(0,1)==='i'||lowerContent.substr(0,1)==='v'||lowerContent.substr(0,1)==='o'){
		  					  // alert('1')
		  					  this.show = '对不起，找不到'+lowerContent
		  					  this.list = ['']
		  				  }
		  			  }						
	  }
  },
  watch:{
	  keyword(){
		  let content = this.keyword.trim()   //将输入框内容清空
		  this.addClass()
		  if(content===''){						//输入内容是否为空
		  //flag代表的是内容为空时的区分标志位
		  //1代表没有输入或逐字清除
		  //2代表点击清除按钮
		  //else代表点击X按钮
			  if(this.flag==='1'){
				this.removeBack()
			  }else if(this.flag==='2'){
				  this.keyword = ''
				  this.removeBack()
			  }else{
				  this.keyword = ''
				  this.show = "请输入城市名(如北京)"
			  }
		  }
		  else if(/^[0-9]+$/.test(content)){	
			  //输入内容是否为数字 
			  this.showError(content)
		  }
		  else if(/^[a-zA-Z]+$/.test(content)){
			  //输入内容是否为字母
			  this.searchAlph(content)
		  }
		  else if(/^[\u4e00-\u9fa5]+$/.test(content)){	
			  //输入内容是否为汉字
			  		  			  let result = []
			  		  			  for(let i in this.cities)	{	   //循环出的i为A,B,C,D
			  		  				  if(i.toLowerCase().indexOf(disreslove(content.substr(0,1)).substr(0,1))>-1){
			  		  					  this.cities[i].forEach((value)=>{
			  		  						  if(value.name.indexOf(content)>-1){
			  		  							  result.push(value)
			  		  							  this.list = result
			  		  						  }
			  		  						  else if(content.indexOf(value.name)>-1){
			  		  							  this.show = '对不起，找不到'+content
			  		  						  }
			  		  						  else{
			  		  							  this.loopWord(content)
			  		  							  if(!(this.iWord.indexOf(content.substr(content.length-1,1))>-1)){
			  		  								  this.show = '对不起，找不到'+content
			  		  								  this.iWord = ''
			  		  							  }
			  		  						  }
			  		  					  })}
			  		  			  }						
			  
		  }
		  else{	
			  
			  this.showError(content)
		  }
	  }
  },
   mounted(){
   	this.scroll = new BScroll(this.$refs.contentWrapper,{
		click:true,
		mouseWheel:{
			speed:20,
			invert:false,
			easeTime:300
		}
	})
   }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.search
  position:relative
  height:.72rem
  background:#e0e4ec
  padding:.2rem
  .iconfont
    position:absolute
    top:.4rem
    left:.4rem
    color:#666
  .search-input
    height:.72rem
    line-height:.72rem
    width:100%
    text-align:left
    box-sizing:border-box
    padding-left:.6rem
    border-radius:.06rem
    color:#666
  .changeSearch
    width:88%
    margin-right:.1rem
  .button
    display:none
  .changeButton
    display:block
    color:#888
    font-weight:bold
    position:absolute
    top:.29rem
    right:.22rem
    z-index:101
    font-size:.35rem
    text-align:center
  .cancel
    display:none
  .changeCancel
    display:block
    position:absolute
    top:.32rem
    right:1.3rem
    color:#fff
    z-index:101
    background:#ccc
    padding:.12rem
    border-radius:.2rem
.search-content
  overflow:hidden
  position:absolute
  z-index:101
  top:1.1rem
  left:0
  right:0
  bottom:0
  background:#eee
  .search-first
    line-height:.22rem
    padding:.1rem
    margin-bottom:.06rem
    color:#666
    background:#fff
    font-size:.1rem
    color:#aaa
  .search-item
    line-height:.82rem
    padding-left:.2rem
    margin-bottom:.06rem
    color:#666
    background:#fff
</style>
